<template>
  <div class="table-box">
    <div class="table-header">
      <el-form
        label-width="80px"
        :inline="true"
        :model="form"
        class="form-inline"
      >
        <el-form-item
          class="table-form-item"
          label="处理天数"
        >
          <el-select
            v-model="form.count"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              label="无限制"
              :value="0"
            />
            <el-option
              v-for="number in 15"
              :key="number"
              :label="number + '天'"
              :value="number"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="form-button">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search"
          size="mini"
        >
          分析
        </el-button>
      </div>
    </div>
    <div class="table-content">
      <el-table-extends
        :data="list"
        border
        height="100%"
        ref="table"
        size="mini"
        :append-number="26"
      >
        <el-table-column
          label="#"
          type="index"
          width="50"
        />
        <el-table-column
          label="结果"
          prop="apiStatus"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          label="文件名"
          prop="fileName"
          show-overflow-tooltip
          width="150"
        />
        <el-table-column
          label="路径"
          prop="filePath"
          show-overflow-tooltip
          width="150"
        />
        <el-table-column
          label="大小"
          prop="size"
          show-overflow-tooltip
          width="60"
        />
        <el-table-column
          label="日期"
          prop="createTime"
          show-overflow-tooltip
        />
        <el-table-column
          label="机车号"
          prop="motorNum"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          label="车次"
          prop="trainNum"
          show-overflow-tooltip
        />
        <el-table-column
          label="司机号"
          prop="driverNum"
          show-overflow-tooltip
        />
        <el-table-column
          label="副司机"
          prop="assisDriverNum"
          show-overflow-tooltip
        />
      </el-table-extends>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop, Emit } from 'vue-property-decorator'
import convert from '@/utils/convert'

@Component
export default class AlarmInfoTable extends Vue {
  form: any = {
    count: 0
  }

  @Prop({
    type: Array,
    default: () => {
      return []
    }
  })
  list!: any[]

  @Prop({
    type: Array,
    default: () => {
      return []
    }
  })
  columns!: any[]

  // 总文件大小
  get totalSize() {
    const size = this.list.reduce((result: number, video: any) => result + video.size, 0)
    return size
  }

  @Emit('search')
  private search() {
    return this.form
  }
}
</script>

<style lang="scss" scoped>
.table-box::-webkit-scrollbar {
  display: none;
}
.table-box {
  height: 60vh;
  overflow: scroll;
  .table-header {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 5px;
    .form-button {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .table-form-item {
      margin-bottom: 0;
      margin-right: 10px;
      /deep/.el-form-item__content {
        width: calc(100% - 80px);
      }
    }
    .checkbox-group {
      padding-left: 0.1rem;
      /deep/.el-form-item__content {
        width: auto;
      }
    }
  }
  .table-content {
    height: calc(100% - 50px);
  }
}
</style>
